<template>
  <div class="main-app">
    <el-row style="margin-top: 10px">
      <el-form ref="form" :model="form" :rules="rules" label-width="200px">
        <el-col :span="8">
          <el-form-item label="转运计划编号:">
            <el-input v-model="form.transferPlanNumber" disabled />
          </el-form-item>
          <el-form-item label="产废单位:">
            <el-input v-model="form.wpcName" disabled />
          </el-form-item>

          <el-form-item label="接受单位:">
            <el-input v-model="form.ccName" disabled />

          </el-form-item>
          <el-form-item label="运输单位:">
            <el-input v-model="form.tcName" disabled />

          </el-form-item>
          <el-form-item label="拟定转运时间:">
            <div class="block">
              <el-date-picker v-model="form.transportTime" disabled type="daterange" range-separator="至"
                              start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" format="yyyy 年 MM 月 dd 日"
              />
            </div>
          </el-form-item>
          <el-form-item label="处置方式:" disabled>
            <el-input v-model="form.disposalMethod" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="12">

          <el-form-item label="转运申请编号:">
            <el-input v-model="form.number" disabled />
          </el-form-item>
          <el-form-item label="" disabled style="margin-top: -20px;" />
          <el-form-item label="通讯地址:">
            <el-input v-model="form.wpcAddress" disabled />
          </el-form-item>
          <el-form-item label="通讯地址:" disabled>
            <el-input v-model="form.ccAddress" disabled />
          </el-form-item>
          <el-form-item label="通讯地址:" disabled>
            <el-input v-model="form.tcAddress" disabled />
          </el-form-item>

          <el-form-item label="转移路线:" disabled>
            <el-input v-model="form.transportationRoute" disabled />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-divider content-position="left">拟转移危险类别</el-divider>
    <el-row style="margin-top: 10px; padding: 10px">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <div>拟定转移数量 ：{{ form.planplanNumber }}</div>
        </el-form-item>
        <el-form-item>
          <el-divider direction="vertical" />
        </el-form-item>
        <el-form-item>
          <div>拟定转移重量 ：{{ form.wastWeight }} 吨</div>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-table :data="form.tableData" border style="width: 100%">
        <el-table-column prop="name" label="废物名称" width="180" />
        <el-table-column prop="wastWeight" label="重量 (吨)" width="180" />
        <el-table-column prop="categoryContent" label="废物类别" />
        <el-table-column prop="codeId" label="废物代码" />
        <el-table-column prop="characteristicContent" label="危险特性" />
        <el-table-column prop="containerCategory" label="容器类型">
          <template slot-scope="scope">
            <el-tag size="medium" style="width: 100%; text-align: center;" effect="dark">
              {{ scope.row.containerCategory | parseContainerCategory }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="hazardousSubstancesName" label="危害成分" />
        <el-table-column prop="physicalProperties" label="废物形态">
          <template slot-scope="scope">
            <el-tag size="medium" style="width: 100%; text-align: center;" effect="dark">
              {{ scope.row.physicalProperties |parsePhysicalProperties }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

    </el-row>
    <el-row style="margin-top: 40px; text-align: center">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button @click="cancel">返 回</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
// Table组件相关逻辑，需要引用
import {
  pageMixin
} from "../../../mixins/index";
import {
  PhysicalProperties,
  ContainerType
} from "../../../utils/resource.js";
import {
  getTransportApplyInfoById,
  getApplyWastList
} from '../../../api/wastereceipt.js';

import {
  getFloat,
  parseStartAndEndTimeList
} from '../../../utils/index.js';
export default {
  filters: {
    parseDate(value) {
      if (value) {
        return value.replace("T", " ");
      }
    },

    parsePhysicalProperties(value) {
      if (value != null) {
        return PhysicalProperties.find((p) => p.value === `${value}`).label;
      }
    },
    parseContainerCategory(value) {
      if (value != null) {
        return ContainerType.find((p) => p.value === `${value}`).label;
      }
    },

  },
  mixins: [pageMixin],
  data() {
    return {
      form: {
        id: "",
        transferPlanplanplanNumber: "",

        ccId: "",

        tcId: "",

        startProposedTransferTime: "",
        endProposedTransferTime: "",
        // transportTime: [new Date(2000, 10, 10), new Date(2000, 10, 11)],
        transportTime: [],

        planplanNumber: 0,
        wastWeight: 0,

        tableData: [],
      },

      collectionUnitList: [],
      productUnitList: [],
      transportUnitList: [],

      rules: {

        transportTime: [{
          required: true,
          message: "请填写转运时间",
          trigger: "change"
        }],

        tcId: [{
          required: true,
          message: "请选择运输单位",
          trigger: "change"
        }],
        ccId: [{
          required: true,
          message: "请选择接受单位",
          trigger: "change"
        }],
      },
    };
  },
  async created() {
    const {
      id
    } = this.$route.params;

    if (id) {
      this.form.id = id;
      await this.getTransportApplyInfoById(id);
    } else {
      this.init();
    }
  },
  methods: {
    init() {
      this.form.planplanplanNumber = this.form.tableData.length;
      this.addWasteWeight();

      // 设置时间
      if (!this.form.startProposedTransferTime) {
        this.form.transportTime = [];
      } else {
        this.form.transportTime = parseStartAndEndTimeList(this.form.startProposedTransferTime, this.form
          .endProposedTransferTime);
      }
    },

    async getTransportApplyInfoById(id) {
      var searchData = {
        limit: this.pageSize,
        page: this.currentPage,
        searchParam: JSON.stringify({
          TransferApplyId: id
        })
      }
      this.loading = true;
      this.form.tableData = [];
      Promise.all([await getTransportApplyInfoById(this.form.id), await getApplyWastList(searchData)])
        .then((result) => {
          this.form = result[0].data;
          console.log("得到的转运申请详情：", this.form);
          result[1].data.forEach(item => {
            item.id = item.hazardousWasteId;
          })
          this.form.tableData = result[1].data;

          this.total = result[1].count;
          this.init();
          this.loading = false;
        })
    },

    addWasteWeight() {
      this.form.wastWeight = 0;
      this.form.tableData.forEach(item => {
        if (item.wastWeight < 0) {
          item.wastWeight = 0
        }
        this.form.wastWeight += item.wastWeight;
      })
      this.form.wastWeight = getFloat(this.form.wastWeight, 5)
    },

    cancel() {
      this.$router.push("/warehouse/inhouse_receive/formList");
    },
  },
};
</script>
